<template>
  <el-card class="box-card" shadow="always">
    <!--工具栏-->
    <div class="head-container">
      <el-form :inline="true" :model="queryParams" @keyup.enter.native="handleQuery()">
        <!--        <el-form-item style="margin-left: 1%">-->
        <!--          <el-button type="primary" @click="handleQuery()">查询</el-button>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" size="small" @click="resetQuery()" v-has-permission="['ums:flower:list']">刷新</el-button>
          <el-button icon="el-icon-download" type="info" size="small" @click="handleExport()" v-has-permission="['ums:flower:export']">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="loading"
      :data="dataList"
      size="small"
      border
      style="width: 100%;text-align-all: center"
      :header-cell-style="{background:'#EAE9E9FF'}"
      @selection-change="handleSelectionChange"
    >
      <!--      <el-table-column type="selection" width="50px" />-->
      <el-table-column prop="username" label="代理账户"/>
      <el-table-column prop="nickname" label="昵称"/>
      <el-table-column prop="header" label="代理头像" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.header" class="pic-image" :preview-src-list="[scope.row.header]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"/>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">未兑换</el-tag>
          <el-tag v-if="scope.row.status === 1" type="success">已兑换</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="领取日期"/>
      <el-table-column prop="useTime" label="兑换时间"/>
      <el-table-column
        label="操作"
        align="center"
        width="240px"
      >
        <template slot-scope="scope">
          <el-button type="success" @click="flowerInfo(scope.row.id)" v-has-permission="['ums:flower:info']">详情</el-button>
          <el-button v-if="scope.row.status === 0" type="danger" @click="useFlower(scope.row)" v-has-permission="['ums:flower:use']">兑换</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="handleQuery"
    />
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="60%" append-to-body>
      <el-form :model="flowerInfoForm">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="代理头像">
              <el-image :src="flowerInfoForm.avatar" class="pic-image" :preview-src-list="[flowerInfoForm.avatar]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="代理账户">
              <span>{{ flowerInfoForm.username }}</span>
            </el-form-item>
            <el-form-item label="代理昵称">
              <span>{{ flowerInfoForm.nickname }}</span>
            </el-form-item>
            <el-form-item label="使用状态">
              <el-tag v-if="flowerInfoForm.status === 0">未兑换</el-tag>
              <el-tag v-if="flowerInfoForm.status === 1" type="success">已兑换</el-tag>
            </el-form-item>
            <el-form-item label="领取日期">
              <span>{{ flowerInfoForm.createTime }}</span>
            </el-form-item>
            <el-form-item label="使用日期">
              <span>{{ flowerInfoForm.useTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in flowerInfoForm.flowerLogs"
                :key="index"
                :timestamp="item.createTime"
              >
                【{{ flowerInfoForm.nickname }}】 成功邀请了 【{{ item.childMember.nickname }}】
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import checkPermission from '@/utils/permission'
import { getFlower, listFlower, useFlower, exportRecord } from '@/api/ums/flower'
import { downloadFile } from '@/utils'

export default {
  name: 'Flower',
  props: {
    memberId: {
      type: String,
      default: () => undefined
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      showVisible: false,
      // 非多个禁用
      multiple: true,
      queryParams: {},
      // 选中数组
      ids: [],
      selectionId: [],
      rechargeList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 弹出层
      dialog: {
        title: undefined,
        visible: false,
        type: undefined // type 操作类型：1-新增 2-修改
      },
      dataList: [],
      flowerInfoForm: {},
      dataForm: {
        id: '',
        uid: '',
        username: '',
        icon: '',
        remark: '',
        create_by: '',
        create_time: '',
        update_by: '',
        update_time: '',
        is_delete: ''
      }
    }
  },
  watch: {
    memberId() {
      console.log(this.memberId)
      this.queryParams.uid = this.memberId
      this.getList()
    }
  },
  created() {
  },
  methods: {
    checkPermission,
    /** 查询活动列表 */
    getList() {
      if (!this.memberId) {
        this.$message({
          message: '请先选择左侧代理',
          type: 'error'
        })
        return
      }
      this.loading = true
      Object.keys(this.queryParams).forEach(key => {
        this.queryParams[key] === '' ? this.queryParams[key] = null : false
      })
      this.queryParams.pageNum = this.pagination.pageNum
      this.queryParams.pageSize = this.pagination.pageSize
      listFlower(this.queryParams).then(response => {
        const { data } = response
        this.dataList = data.list
        this.pagination.total = data.totalCount
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.query = {}
      this.handleQuery()
    },
    useFlower(val) {
      useFlower(val).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
      })
      this.getList()
    },
    flowerInfo(val) {
      getFlower(val).then(res => {
        this.flowerInfoForm = res.data
      })
      this.dialog = {
        title: '小红花详情',
        visible: true
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const dataForm = this.dataForm
      delete dataForm.pageNum
      delete dataForm.pageSize
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportRecord(dataForm)
      }).then(response => {
        downloadFile(response.data, '小红花数据', 'xls')
      })
    },
    closeDialog() {
      this.dialog = {
        title: undefined,
        visible: false,
        type: undefined
      }
      this.flowerInfoForm = {}
    }
  }
}
</script>

<style scoped>
.pic-image {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
</style>
